<template>
	<view class="p20 ">
		<swiper :indicator-dots="false" class="sss" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item,index) in lblist">
				<image :src="item.image" mode="" class="imglun"></image>
			</swiper-item>
		</swiper>
		<view class="p20 bag--fff mt20 br--40 flex a-center f14">
			<image src="../../static/laba.png" mode="" class="img20"></image>
			<view class="cred ml10">
				开班信息
			</view>
			<swiper :indicator-dots="false" class="qqq f1" :autoplay="true" :interval="3000" :duration="1000"
				:circular="true" :vertical="true">
				<swiper-item v-for="(item,index) in kaiban"
					@click="goto(`/pages/index/newArr?id=${item.skill_institution_id}`)">
					<view class=" ml10 text-hidden-1">
						{{item.title}}
					</view>
				</swiper-item>
			</swiper>

			<image src="../../static/right.svg" mode="" class="img12"></image>
		</view>
		<view class="flex a-center mt30 mb10">
			<view class="quan flex a-center ju--around" @click="diqu">
				<view class="fw">
					全市
				</view>
				<image src="../../static/xia.png" mode="" class="xia"></image>
			</view>
			<u-input placeholder="搜索机构名称、培训工种" v-model="key_word" prefixIcon="search"
				prefixIconStyle="font-size: 40rpx;color: #aaa" class="inp ml10">
				<template slot="suffix">
					<u-button @tap="getCode" text="搜索" class="but" size="mini"></u-button>
				</template>
			</u-input>
		</view>
		<scroll-view scroll-y="true" class="scroll-view oy-auto  pr h100 " @scrolltolower="getMore">
			<view class="p20 bag--fff mt20 br--20 " v-for="(item,index) in list" :key="index"
				@click="goto(`/pages/index/schooldetail?id=${item.id}`)">
				<view class="fw f14">
					{{item.name}}
				</view>
				<view class=" f12 co--999 mt20">
					{{item.skill_lavel}}
				</view>
			</view>
			<myEmpty v-if="list.length !=0"></myEmpty>
			<view class="center fs12 co--999 mt10">
				上滑加载更多
			</view>
		</scroll-view>

		<!-- 弹框 -->
		<uni-popup ref="popup" background-color="#fff" borderRadius="20px 20px 0px 0px" @change="change">
			<view class="popup-content">
				<view class="flex a-center mb20">
					<view class="f1 fw f16" style="text-align: center;">
						筛选所属地区
					</view>
					<image src="../../static/XXX.png" class="img16" @click="close"></image>
				</view>
				<view class="center oy-auto mt40 mb30 " style="height:500rpx">
					<view class="pt20 pb20 co--999 bk" :class="jfacti==item.userId?'hg':''"
						v-for="(item,index) in jfjelist" :key="index" @click="jf(item,index)">
						{{item.nickName}}
					</view>
				</view>
				<view class="btn-1 but f16" @click="submit">确认</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				jfacti: 1,
				jfjelist: [],
				region: '',
				key_word: '',
				list: [],
				vvalue: null,
				kaiban: [],
				lblist: []
			}
		},
		onLoad() {
			this.getlist()
			this.getkaiban()
			this.CityList()
			this.getSkilllists()
		},
		methods: {
			async getlist() {
				let {
					data
				} = await this.$rqt.getSideshowList()
				console.log(data, '轮播图')
				this.lblist = data
			},
			async CityList() {
				let {
					data
				} = await this.$rqt.getSkillCityList()
				data.forEach(item => {
					this.jfjelist.push({
						userId: item.value,
						nickName: item.name,
						typevalue: item.type_value
					});
				});
			},
			async getSkilllists() {
				let {
					data
				} = await this.$rqt.getSkilllists({
					key_word: this.key_word,
					region: this.region
				})
				console.log(data, '技能提升首页：机构列表')
				this.list = data.lists
			},
			async getkaiban() {
				let {
					data
				} = await this.$rqt.getSkillClassIndexList()
				console.log(data, '开班信息')
				this.kaiban = data
			},
			change(e) {
				console.log("e:", e);
			},
			getCode() {
				console.log(this.key_word, 'sss')
				this.getSkilllists()
			},
			getMore() {
				// this.pageNo++
				console.log('1')
			},
			diqu() {
				console.log('2')
				this.$refs.popup.open('bottom')
			},
			jfqr() {

			},
			jf(item, index) {
				this.jfacti = item.userId
				console.log(item, 'item')
				// this.queryList(item.typevalue);
			},
			// queryList(typeValue) {
			// 	const selectedItem = this.jfjelist.find(item => item.typevalue === typeValue); // 找到匹配的字典数据
			// 	if (selectedItem) {
			// 		// this.vvalue = selectedItem.value;
			// 		console.log(selectedItem, 'selectedItem')
			// 	} else {
			// 		console.error('没有找到对应的字典项');
			// 	}
			// },
			submit() {
				this.region = this.jfacti
				this.getSkilllists()
			},
			close() {
				this.$refs.popup.close()
			},
		}
	}
</script>

<style lang="scss">
	.sss {
		height: 332rpx;
	}

	.imglun {
		width: 100%;
		height: 332rpx;
	}

	.quan {
		width: 152rpx !important;
		text-align: center;
		color: #0256FF;
		background-color: #E0E9FA;
		border-radius: 36rpx;
		padding: 10rpx 0;
	}

	.xia {
		width: 21.8rpx;
		height: 15.26rpx;
	}

	::v-deep .u-border {
		border: none;
		background: #fff;
	}

	::v-deep .u-input--radius {
		border-radius: 42rpx !important;
	}

	::v-deep .u-input {
		margin-left: 16rpx;
		font-size: 28rpx;
	}

	::v-deep .u-button {
		width: 120rpx !important;
		height: 56rpx !important;
		border-radius: 28rpx !important;
		background: #0256FF !important;
		color: #fff !important;
		font-size: 28rpx;
	}

	::v-deep .popup-content {
		border-radius: 40rpx 40rpx 0 0 !important;
	}

	.popup-content {
		border-radius: 40rpx 40rpx 0 0 !important;
		padding: 20rpx;
		height: 698rpx;


		.texta {
			margin-top: 52rpx;
			position: relative;
		}

		.bk {
			border-top: 2rpx solid #f5f5f5;
		}

		.hg {
			color: #0256FF;
		}

		.but {
			padding: 22rpx;
		}
	}

	.qqq {
		height: 35rpx;
		z-index: 9999;
	}
</style>